<script setup lang="ts">
import { reactive, ref, watch, onMounted } from 'vue';
import { positionApi } from '@T2/service/api.ts';
import { buildTree } from '@T2/utils/utils.ts';
import type Node from 'element-plus/es/components/tree/src/model/node';
import type { ElTree } from 'element-plus';

interface TreeNode {
  id: number;
  name: string;
  parent: null | number;
  project?: number;
  children?: TreeNode[];
  [key: string]: any;
}
const emits = defineEmits<{
  (event: 'current-change', data: TreeNode, node: Node): void;
  (event: 'positions-load', positionList: any[]): void;
}>();

onMounted(() => {
  getPosition();
});

const Resd = reactive({
  tree: [] as TreeNode[],
  filterText: '',
});
const treeRef = ref<InstanceType<typeof ElTree> | null>(null);
const getPosition = () => {
  positionApi({
    method: 'get',
    params: {
      ordering: 'id',
    }
  }).then((res: any) => {
    emits('positions-load', res?.results || []);
    Resd.tree = [{id: 0, name: '全部', parent: null, children: buildTree(res?.results || [], 'parent') }];
    setTimeout(() => {
      treeRef.value!.setCurrentKey(0);
    }, 100);
  });
}

watch(() => Resd.filterText, (nv) => {
  treeRef.value!.filter(nv);
});
const filterNode = (value: string, data: TreeNode, node: Node) => {
  if (!value) {
    return true;
  }
  let obj = data, parentNode = node.parent, names: string[] = [];
  for(let level = node.level; level > 0; level--) {
    names = [...names, obj.name];
    obj = parentNode.data as TreeNode;
    parentNode = parentNode.parent;
  }
  return names.some(name => name.indexOf(value) !== -1);
}
const handleChange = (data: TreeNode, node: Node) => {
  emits('current-change', data, node);
}
</script>

<template>
  <div class="tree">
    <el-input v-model="Resd.filterText" placeholder="输入名称进行筛选..." >
      <template #suffix>
        <el-icon><Search /></el-icon>
      </template>
    </el-input>
    <el-tree
      ref="treeRef"
      class="filter-tree scroller-aside"
      node-key="id"
      :highlight-current="true"
      :props="{label: 'name'}"
      :data="Resd.tree"
      :indent="15"
      :filter-node-method="filterNode"
      :default-expanded-keys="[0]"
      @current-change="handleChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.tree {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.filter-tree {
  flex: 1;
  overflow: auto;
}
</style>

<style scoped>
/* 搜索框 */
:deep(.el-input) {
  border: none;
  width: 100%;
  border-radius: 3px 3px 3px 3px;
  margin-bottom: 8px;
  background-color: transparent;
}
:deep(.el-input__wrapper) {
  box-shadow: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-radius: 0;
}
:deep(.el-input__wrapper .el-input__inner) {
  color: #121E34;
}
:deep(.el-input__wrapper::placeholder) {
  color: rgba(18,30,52,0.4);
}
:deep(.el-input__wrapper::-webkit-input-placeholder) {
  color: rgba(18,30,52,0.4);
}
:deep(.el-input__wrapper::-moz-placeholder) {
  color: rgba(18,30,52,0.4);
}

/* position树状结构 */
:deep(.el-tree) {
  border-radius: 3px;
  padding: 4px 0;
}
:deep(.el-tree .el-tree-node__content) {
  height: 26px;
  background-color: transparent;
}
:deep(.el-tree .el-tree-node__label) {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:deep(.el-tree .el-tree-node__content:hover) {
  background-color: rgba(220,220,220,0.2);
}
:deep(.el-tree .is-current>.el-tree-node__content) {
  background-color: #F1F4FA;
}
:deep(.el-tree >.el-tree-node) {
  margin: 2px;
}
:deep(.el-tree >.el-tree-node >.el-tree-node__children>.el-tree-node) {
  margin: 2px 0;
}
:deep(.el-tree .el-icon) {
  margin-right: 4px;
}

:deep(.el-tree .is-current >.el-tree-node__content >.el-tree-node__label) {
  color: #4D92F5;
}
</style>